import React, { Component } from 'react'
import "./tabBar.scss"
import {withRouter} from "react-router-dom"
import { TabBar } from 'antd-mobile';

class tabBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'redTab',
      hidden: false,
      fullScreen: true,
    };
  }
  render() {
    return (
      <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#ff2d4a"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="电影/影院"
            key="电影/影院"
            icon={<i className="iconfont icon-dianying"></i>}
            selectedIcon={<i className="iconfont icon-dianying" style={{color:"#ff2d4a"}}></i>}
            selected={this.props.location.pathname === "/"}
            onPress={() => {this.props.history.push("./")}}
            data-seed="logId" 
          >
            {this.props.location.pathname === "/"&&this.props.children}
            
          </TabBar.Item>
          <TabBar.Item
            icon={<i className="iconfont icon-shipin"></i>}
            selectedIcon={<i className="iconfont icon-shipin" style={{color:"#ff2d4a"}}></i>}
            title="视频"
            key="视频"
            selected={this.props.location.pathname === "/video"}
            onPress={() => {this.props.history.push("./video")}}
            data-seed="logId1"
          >
            {this.props.location.pathname === "/video"&&this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={<i className="iconfont icon-shipinbofangyingpian"></i>}
            selectedIcon={<i className="iconfont icon-shipinbofangyingpian" style={{color:"#ff2d4a"}}></i>}
            title="小视频"
            key="小视频"
            selected={this.props.location.pathname === "/shortVideo"}
            onPress={() => {this.props.history.push("./shortVideo")}}
          >
            {this.props.location.pathname === "/shortVideo"&&this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={<i className="iconfont icon-dianyingpiao"></i>}
            selectedIcon={<i className="iconfont icon-dianyingpiao" style={{color:"#ff2d4a"}}></i>}
            title="演出"
            key="演出"
            selected={this.props.location.pathname === "/performance"}
            onPress={() => {this.props.history.push("./performance")}}
          >
            {this.props.location.pathname === "/performance"&&this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={<i className="iconfont icon-tubiaolunkuo-"></i>}
            selectedIcon={<i className="iconfont icon-tubiaolunkuo-" style={{color:"#ff2d4a"}}></i>}
            title="我的"
            key="我的"
            selected={this.props.location.pathname === "/my"}
            onPress={() => {this.props.history.push("./my")}}
          >
            {this.props.location.pathname === "/my"&&this.props.children}
          </TabBar.Item>
        </TabBar>
      </div>
    )
  }
}
export default withRouter(tabBar)